import React , { Component } from 'react';
import {addTodo, deleteTodo, modTodo, completeTodo} from "./Actions.js";
import './Todo.css';
import PropTypes from 'prop-types';

class TodoInput extends Component{
    constructor(props, context) {
        super(props, context);
        this.onAddButton = this.onAddButton.bind(this);
        this.onDelButton = this.onDelButton.bind(this);
        this.onModButton = this.onModButton.bind(this);
        this.onDoneButton = this.onDoneButton.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this);
        this.onViewTodo = this.onViewTodo.bind(this);
        this.state={
            whatInput:'',
            whereInput:'',
            whenInput:''
        }
    };


    onAddButton(){
        if(this.state.whatInput.trim()){
            this.context.store.dispatch(addTodo(this.state.whatInput, this.state.whereInput, this.state.whenInput));
            this.setState({
                whatInput:'',
                whereInput:'',
                whenInput:''
            })
        }
    };

    onDelButton(){
        this.context.store.dispatch(deleteTodo());
    };

    onModButton(){
        this.context.store.dispatch(modTodo(this.state.whatInput, this.state.whereInput, this.state.whenInput));
        this.setState({
            whatInput:'',
            whereInput:'',
            whenInput:''
        })
    };

    onDoneButton(){
        this.context.store.dispatch(completeTodo());
    };

    onViewTodo(){
        let state = this.context.store.getState();
        state.map((item) =>{
            if(item.active === true){
                this.setState({
                    whatInput:item.text,
                    whereInput:item.place,
                    whenInput:item.time
                })
            }
        })
    }


    handleInputChange(event){
        let target = event.target;
        let value = target.value;
        let name = target.name;
        this.setState({
            [name]: value
        })
    }

    render(){
        return(
            <div className="todo-input" ref="inputField">
                    <fieldset className="input-container">
                        <label>事项:<input name="whatInput" value={this.state.whatInput} onChange={this.handleInputChange} type="text" className="form-control" /></label>
                    </fieldset>
                    <fieldset className="input-container">
                        <label>地点:<input name="whereInput" value={this.state.whereInput} onChange={this.handleInputChange} type="text" className="form-control" /></label>
                    </fieldset>
                    <fieldset className="input-container">
                        <label>时间:<input name="whenInput" value={this.state.whenInput} onChange={this.handleInputChange} type="date" className="form-control" /></label>
                    </fieldset>
                    <fieldset className="button-container">
                        <button onClick={this.onAddButton} className="btn btn-primary">新增</button>
                        <button onClick={this.onDelButton} className="btn btn-danger">删除</button>
                        <button onClick={this.onViewTodo} className="btn btn-primary">查看</button>
                        <button onClick={this.onModButton} className="btn btn-warning">修改</button>
                        <button onClick={this.onDoneButton} className="btn btn-success">完成</button>
                    </fieldset>
            </div>
        )
    }
}

TodoInput.contextTypes = {
    store: PropTypes.object
};



export default TodoInput;